<template>
  <div class="app-container">
    <el-form ref="form" :model="sjMerchant" label-width="70px">
      <el-form-item label="供应商名称" label-width="82px">
        <el-input
          type="text"
          placeholder="供应商名称 最大长度为20"
          v-model="sjMerchant.name"
          maxlength="20"
        >
        </el-input>
      </el-form-item>

      <!--供应商logo-->
      <el-form-item label="供应商logo">
        <!-- 头衔缩略图 -->
        <pan-thumb :image="sjMerchant.avatar + ''" />
        <!-- 文件上传按钮 -->
        <el-button
          type="primary"
          icon="el-icon-upload"
          @click="imagecropperShow = true"
          >更换logo
        </el-button>
        <image-cropper
          v-show="imagecropperShow"
          :width="100"
          :height="100"
          :key="imagecropperKey"
          :url="BASE_API + '/fileoss/sjoss'"
          field="file"
          @close="close"
          @crop-upload-success="cropSuccess"
        />
      </el-form-item>

      <el-form-item label="供应商排序">
        <el-input-number
          v-model="sjMerchant.sort"
          controls-position="right"
          :min="0"
        ></el-input-number>
      </el-form-item>

      <el-form-item label="供应商简介" label-width="82px">
        <el-input
          type="textarea"
          placeholder="供应商简介 最大长度为500"
          v-model="sjMerchant.intro"
          maxlength="500"
          :rows="0"
        >
        </el-input>
      </el-form-item>

      <el-form-item>
        <el-button
          :disabled="saveBtnDisabled"
          type="primary"
          @click="saveOrUpdate"
          >保存</el-button
        >
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import merchant from "@/api/merchant/merchant";
import ImageCropper from "@/components/ImageCropper";
import PanThumb from "@/components/PanThumb";

export default {
  components: { ImageCropper, PanThumb },
  data() {
    //这里存放数据
    return {
      sjMerchant: {
        name: "",
        sort: 0,
        intro: "", // 简介
        avatar: "", // logo
      },
      saveBtnDisabled: false, // 保存按钮是否禁用
      imagecropperShow: false, //上传弹框组件是否显示
      imagecropperKey: 0, // 上传组件key值(唯一标识)
      BASE_API: process.env.BASE_API, // 获取dev.env.js中地址
    };
  },
  // 监听
  watch: {
    // 当路由发送变化，就会执行
    $route(to, from) {
      this.init();
    },
  },
  //方法集合
  methods: {
    // 关闭上传弹框的方法
    close() {
      this.imagecropperShow = false;
      this.imagecropperKey = this.imagecropperKey + 1;
    },
    // 上传成功方法
    cropSuccess(data) {
      this.sjMerchant.avatar = data.url;
      this.imagecropperShow = false;
      this.imagecropperKey = this.imagecropperKey + 1;
    },
    // 根据供应商id查询
    getMerchantInfo(id) {
      merchant.getMerchantById(id).then((response) => {
        this.sjMerchant = response.data.merchant;
      });
    },
    // 添加或者修改按钮
    saveOrUpdate() {
      // 如果没有id就是添加操作，否则修改
      if (!this.sjMerchant.id) {
        this.saveMerchant();
      } else {
        this.updateMerchant();
      }
    },
    // 添加供应商
    saveMerchant() {
      console.log(this.sjMerchant);
      merchant.addMerchant(this.sjMerchant).then((response) => {
        this.$message({
          type: "success",
          message: "添加成功!",
        });
        // 路由跳转
        this.$router.push({ path: "/merchant/table" });
      });
    },
    // 修改供应商 TODO 有个小问题，名字如果和其他重复则会出现异常（以后修改）
    updateMerchant() {
      console.log(this.sjMerchant);
      merchant.updateMerchantInfo(this.sjMerchant).then((response) => {
        this.$message({
          type: "success",
          message: "修改成功!",
        });
        this.$router.push({ path: "/merchant/table" });
      });
    },
    init() {
      // 如果有参数就是修改
      if (this.$route.params && this.$route.params.id) {
        const id = this.$route.params.id;
        this.getMerchantInfo(id);
      } else {
        // 没有参数则清空对象做添加操作
        this.sjMerchant = {};
      }
    },
  },
  created() {
    this.init();
  },
};
</script>
<style scoped>
</style>
